<template>
  <scroll-view
    class="home-list"
    scroll-y
    @scrolltolower="scrollBottom"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <template v-if="arr && arr.length > 0">
      <view class="info-box" v-for="(item, index) in arr" :key="item.id">
        <!-- <view class="title">
          <view class="radio">
            <u-radio :name="index"></u-radio>
          </view>
          <text class="txt u-line-1">模具编号</text>
          <view class="tag-box">
            <text class="txt u-line-1"> {{ item.moldCode }}</text>
            <u-tag
              shape="circle"
              :text="item.moldState"
              color="#3c9cff"
              borderColor="#3c9cff"
              bgColor="#ebf5fc"
            ></u-tag>
          </view>
        </view> -->
        <view class="text-box">
          <text class="label">检查项目:</text>
          <text class="value">{{ item.checkProject }}</text>
        </view>
        <view class="text-box">
          <text class="label">检查内容:</text>
          <text class="value">{{ item.checkContent }}</text>
        </view>
        <view class="text-box">
          <text class="label">是否完成:</text>
          <text class="value" v-if="isView">{{
            item.isFinish ? "是" : "否"
          }}</text>
          <view class="switch" v-else>
            <u-switch v-model="arr[index].isFinish"></u-switch>
          </view>
        </view>
        <view class="text-box">
          <text class="label">备注:</text>
          <text class="value">{{ item.remarks }}</text>
        </view>
        <view class="box-item">
          <text class="label">上传附件:</text>
          <MyUpload
            v-model="arr[index].fileList"
            multiple
            :deletable="!isView"
            :disabled="isView"
            :maxCount="5"
          ></MyUpload>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="info-box">
        <Empty />
      </view>
    </template>
    <!-- <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="noData">已拉到最底部</view> -->
  </scroll-view>
</template>

<script>
import { setPageData } from "@/store/user";
import Empty from "@/components/empty";
import fetch from "@/utils/fetch";
import MyUpload from "@/components/myUpload";
export default {
  components: { Empty, MyUpload },
  props: {
    isView: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: {},
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    radioGroup: {
      handler: function (val, oldVal) {
        this.$emit("itemClick", val);
      },
    },
  },
  data() {
    return {
      loading: true,
      fileList: [],
      arr: [],
      search: {
        pageNum: 1,
        pageSize: 10,
      },
      triggered: false,
      radioGroup: "",
      scroll: false,
      noData: false,
    };
  },
  mounted() {
    if (this.isView) this.getHistory(true);
    else this.getRules(true);
  },
  methods: {
    getHistory(arg) {
      const that = this;
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.arr = [];
      }
      const workCode = this.data.workCode;
      fetch("get", "/dms/mobile/selectHistoryClearLine", null, {
        workCode,
      }).then(({ data }) => {
        that.arr = (data || []).map((item) => {
          return {
            ...item,
            fileList: (item.img || []).map((item) => {
              return {
                ...item,
                url: item.fileUrl,
              };
            }),
          };
        });
        console.log("that.arr", that.arr);
        that.noData = true;
      });
    },
    getRules(arg) {
      const that = this;
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.arr = [];
      }
      const productionProcessesCode = this.data.productionProcessesNum;
      fetch("get", "/dms/mobile/clearLineConfigList", null, {
        productionProcessesCode,
      }).then(({ data }) => {
        that.arr = (data || []).map((item) => {
          return {
            ...item,
            fileList: item.img
              ? item.img.split(",").map((item) => {
                  return {
                    url: item,
                  };
                })
              : [],
          };
        });
        console.log("that.arr", that.arr);
        that.noData = true;
      });
    },
    clickMore(index) {
      this.$set(this.arr, index, {
        ...this.arr[index],
        showMore: !this.arr[index].showMore,
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    setLoading(val) {
      this.loading = val;
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      if (this.isView) this.getHistory(true);
      else this.getRules(true);
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 100);
    },
    scrollBottom(e) {
      const that = this;
      if (!that.noData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        if (this.isView) this.getHistory();
        else this.getRules();
      }
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    itemClick(item) {
      if (this.type !== "1") return;
      setPageData(item);
      this.$emit("itemClick", item);
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-list {
  height: 100%;
  overflow: auto;
  .info-box {
    margin: 0 0 20rpx 0;
  }
  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }
  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
    .switch {
      float: right;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
}
</style>
